<script setup>
import { getPayAPI } from '@/network/pay';
import {ref, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {usePayStore} from '@/stores/payStore'
import {useCountDown} from '@/composables/useCountDown.js'
const {formatTime, start} = useCountDown()
const route = useRoute()
    const pay = ref({})
    async function getPay() {
        const res = await getPayAPI(route.query.id)
        console.log(res);
        pay.value = res.result
        // 用pinia存一下支付价格
        const {getPayPrice} = usePayStore()
        getPayPrice(pay.value.payMoney)

         // 倒计时
        start(pay.value.countdown)
    }
    
    onMounted(() => {
        getPay()
    })

    // // 跳转支付
    // // 携带订单id以及回调地址，跳转到支付地址(get)
    // // 支付地址
    const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
    const backURL = 'http://localhost:5173/paycallback'
    const redirectUrl = encodeURIComponent(backURL)
    const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

    
    
    
</script>


<template>
    <div class="pay">
        
        <div class="container">
            <!-- 付款信息 -->
            <div class="pay-info">
                <span class="icon iconfont icon-queren2"></span>
                <div class="tip">
                    <p>订单提交成功！请尽快完成支付。</p>
                    <p> 支付还剩 {{ formatTime }}, 超时后将取消订单 </p>
                </div>
                <div class="amout">
                    <span>应付总额：</span>
                    <span>¥{{pay.payMoney?.toFixed(2)}}</span>
                </div>
            </div>
            <!-- 付款方式 -->
            <div class="pay-type">
                <h3 class="head">选择以下支付方式付款</h3>
                <div class="item">
                    <h3>支付平台</h3>
                    <a class="btn wx" href="javascript:;">微信支付</a>
                    <a class="btn alipay" :href="payUrl">支付宝支付</a>
                </div>
                <div class="item">
                    <h3>支付方式</h3>
                    <a class="btn" href="javascript:;">招商银行</a>
                    <a class="btn" href="javascript:;">工商银行</a>
                    <a class="btn" href="javascript:;">建设银行</a>
                    <a class="btn" href="javascript:;">农业银行</a>
                    <a class="btn" href="javascript:;">交通银行</a>
                </div>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .pay{
        margin-top: 20px;
        .pay-info{
            display: flex;
            align-items: center;
            background: #fff;
            padding: 0 80px;
            height: 240px;
            .icon{
                font-size: 80px;
                color: #1dc779;
            }
            .tip{
                flex: 1;
                padding-left: 10px;
                p{
                    &:first-child{
                        font-size: 20px;
                        margin-bottom: 5px;
                    }
                    &:last-child{
                        font-size: 16px;
                        color: #999;
                    }
                }
            }
            .amout{
                span{
                    &:first-child{
                        font-size: 16px;
                        color: #999;
                    }
                    &:last-child{
                        font-size: 20px;
                        color: $priceColor;
                    }
                }
            }
        }

        .pay-type{
            background: #fff;
            margin-top: 20px;
            padding-bottom: 70px;
            h3{
               padding: 24px 0;
                font-weight: normal;
                padding-left: 30px;
                &.head{
                    border-bottom: 1px solid #f5f5f5;
                }
            }
            .btn{
                display: inline-block;
                width: 150px;
                height: 50px;
                border: 1px solid #e4e4e4;
                line-height: 50px;
                text-align: center;
                margin-left: 30px;
                color: #666;
                &:hover{
                    border-color: $xtxColor;
                }
            }
            .wx{
                text-indent: -999px;
                background: url('https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg') no-repeat left top/100%;
            }
            .alipay{
                text-indent: -999px;
                background: url('https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png') no-repeat left top/100%;
            }
        }
    }
</style>